<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="common/common_head :: commonHeader('询价单录入')"/>
    <link th:href="@{/static/css/plugins/cropper/cropper.min.css}" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <form class="form-horizontal" method="post" id="inquiryHeaderForm">
        <div class="row">
            <div class="form-group">
                <div class="col-sm-8" style="margin-left: 16px">
                    <input class="btn btn-primary" type="button" onclick="save()" value="保存">
                    <button class="btn btn-primary" type="button" onclick="Dialog.closeFrame(window.name)">取 消</button>
                </div>
            </div>
            
	        <!-- 显示 隐藏测试 -->
			<ul id="myTab" class="nav nav-tabs">
				<li class="active">
					<a href="#basicinformation" linkTab="basicinformation" isActive="true" data-toggle="tab"> 基础信息</a>
				</li>
				<li>
					<a href="#materialformation" linkTab="materialformation" data-toggle="tab"> 物料信息</a>
				</li>
				<li>
					<a href="#vendorformation" linkTab="vendorformation" data-toggle="tab"> 供应商基本信息</a>
				</li>
			</ul>
			
			<!-- 基本信息 -->
	        <div id="basicinformation">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<div class="form-group">
						    <input type="hidden" name="pkId" th:value="${inquiryHeaderEntity.inquiryId}">
						    <label class="col-xs-1 control-label"><span class="required-sign">*</span>汇总号2：</label>
						    <div class="col-xs-3">
						        <input name="inquiryTotalCode" th:value="${inquiryHeaderEntity.inquiryTotalCode}" type="text" placeholder="汇总号" class="form-control" readonly="readonly">
						    </div>
						    <label class="col-xs-1 control-label">公司代码：</label>
						    <div class="col-xs-3">
						    	<select class="form-control" id="companyCode" name="companyCode" th:data-val="${inquiryHeaderEntity.companyCode}" sysDict="GC" emptyFirst="true"></select>
						    </div>
						    <label class="col-xs-1 control-label">采购组织</label>
						    <div class="col-xs-3">
						    	<select class="form-control required" title="请输入采购组织" id="purchaseOrg" name="purchaseOrg" th:data-val="${inquiryHeaderEntity.purchaseOrg}" sysDict="CGZZ" emptyFirst="true"></select>
						    </div>
						</div>
						<div class="form-group">
						    <label class="col-sm-1 control-label"><span class="required-sign">*</span>采购组：</label>
						    <div class="col-sm-3">
						        <select class="form-control required" id="purchaseGrp" name="purchaseGrp" th:data-val="${inquiryHeaderEntity.purchaseGrp}" title="请输入采购组织" sysDict="CGZ" emptyFirst="true"></select>
						    </div>
						    <label class="col-sm-1 control-label">语言编码：</label>
						    <div class="col-sm-3">
						        <input class="form-control required" name="language" th:value="${inquiryHeaderEntity.language}" title="请输入语言编码" type="text" placeholder="地址">
						    </div>
						    <label class="col-sm-1 control-label">货币：</label>
						    <div class="col-sm-3">
						        <select class="form-control required" title="请输入货币" id="currency" name="currency" th:data-val="${inquiryHeaderEntity.currency}" sysDict="BZ" emptyFirst="true"></select>
						    </div>
						</div>
						<div class="form-group">
						    <label class="col-sm-1 control-label">询价开始日期：</label>
						    <div class="col-sm-3">
						        <input class="form-control required" title="询价开始日期" name="beginDate" th:value="${inquiryHeaderEntity.beginDate}" id="beginDate" type="text" placeholder="询价开始日期">
						    </div>
						    <label class="col-sm-1 control-label">报价截止日期：</label>
						    <div class="col-sm-3">
						        <input class="form-control required" title="报价截止日期" name="endDate" th:value="${inquiryHeaderEntity.endDate}" id="endDate" type="text" placeholder="报价截止日期">
						    </div>
						    <label class="col-sm-1 control-label">抬头备注</label>
						    <div class="col-sm-3">
						        <input name="remark" th:value="${inquiryHeaderEntity.remark}" type="text" placeholder="抬头备注" class="form-control">
						    </div>
						</div>
					</div>
				</div>
	        </div>
			
			<!-- 物料信息 -->
			<div id="materialformation" style="display:none;">
			    <div class="ibox float-e-margins">
			        <div class="ibox-title">
			        	<!-- <button type="button" class="btn  btn-rounded btn-sm" onclick='addtr("materialformation")'><i class="fa fa-plus"></i>&nbsp;添加</button> -->
			        </div>
					<div class="table-responsive">
						<table class="table table-bordered text-nowrap" id="para_table">
						      <thead>
								<tr>
								    <th>物料编码</th>
								    <th>采购申请编码</th>
								    <th>物料描述</th>
								    <th>数量</th>
								    <th>采购订单单位</th>
								    <th>交货日期</th>
								    <th>工厂</th>
								    <th>库存地点</th>
								    <th>物料组</th>
								    <th>参考PR</th>
								    <th>参考行项目</th>
								    <th>项目备注</th>
								    <th></th>
								</tr>
							</thead>
							<tbody>
							 <tr th:each="InquiryItemEntity : ${itemlist}">
							 <td style="display:none"><input name="inquiryItemId" type="hidden" th:value="${InquiryItemEntity.inquiryId}"/></td>
							 <td width='110px'><input style='width:95%' name='materialCode' th:value="${InquiryItemEntity.materialCode}"/></td>
							 <td width='110px'><input style='width:95%' name='requestCode' th:value="${InquiryItemEntity.requestCode}"/></td>
							 <td width='110px'><input style='width:95%' name='materialDesc' th:value="${InquiryItemEntity.materialDesc}"/></td>
						     <td width='110px'><input style='width:95%' type='text' name='purchaseCnt' th:value="${InquiryItemEntity.purchaseCnt}"/></td>
						     <td width='110px'><input style='width:95%' type='text' name='poUnit' th:value="${InquiryItemEntity.poUnit}"/></td>
						     <td width='110px'><input style='width:95%' type='text' name='deliveryDate' th:value="${InquiryItemEntity.deliveryDate}"/></td>
							 <td width='110px'><input style='width:95%' type='text' name='werks' th:value="${InquiryItemEntity.werks}"/></td>
							 <td width='110px'><input style='width:95%' type='text' name='storageLocation' th:value="${InquiryItemEntity.storageLocation}"/></td>
							 <td width='110px'><input style='width:95%' type='text' name='materialGroup' th:value="${InquiryItemEntity.materialGroup}"/></td>
							 <td width='110px'><input style='width:95%' type='text' name='purchRequestCode' th:value="${InquiryItemEntity.purchRequestCode}"/></td>
							 <td width='110px'><input style='width:95%' type='text' name='purchRequestItemCode' th:value="${InquiryItemEntity.purchRequestItemCode}"/></td>
							 <td width='110px'><input style='width:95%' type='text' name='remark' th:value="${InquiryItemEntity.remark}"/></td>
							 <td width='110px'></td>
							 </tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
        <!-- 供应商信息 -->
        <div id="vendorformation" style="display:none;">
              <div class="ibox float-e-margins">
		        <div class="ibox-title">
                     <!-- <button type="button" class="btn btn-xs btn-link" onclick='addtr("vendorformation")'>添加</button> -->
                     <!-- <button type="button" class="btn  btn-rounded btn-sm" onclick='addtr("vendorformation")'><i class="fa fa-plus"></i>&nbsp;添加</button> -->
                </div>
		        <div class="table-responsive">
                    <table class="table table-bordered text-nowrap" id="vendor_table">
				       <thead>
							<tr>
							    <th>供应商编码</th>
							    <th>供应商名称</th>
							    <th>付款条件</th>
							    <th>国际贸易条款</th>
							    <th>操作</th>
							</tr>
						</thead>
						<tbody>
						<tr th:each="InquiryVendorEntity : ${vendorlist}">
						<td style="display:none"><input name="inquiryItemId" type="hidden" th:value="${InquiryVendorEntity.inquiryId}" /></td>
						<td width='110px'><input style='width:95%' type='text' name='vendorCode' th:value="${InquiryVendorEntity.vendorCode}" /></td>
						<td width='110px'><input style='width:95%' type='text' name='vendorName' th:value="${InquiryVendorEntity.vendorName}" /></td>
						<td width='110px'><input style='width:95%' name='payTermsPurchase' th:value="${InquiryVendorEntity.payTermsPurchase}" readonly="readonly" /></td>
						<td width='110px'><input style='width:95%' name='i18nTradeTerms' th:value="${InquiryVendorEntity.i18nTradeTerms}" readonly="readonly" /></td>
						<td width='110px'></td>
						</tbody>
					</table>
                </div>
			</div>
        </div>
		</div>
   </form>
</div>
<!-- Modal -->
<!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document" style="width:70%">
    <div class="modal-content" style="height:700px">
    <form id="materialFactoryForm" th:action="@{/materialFactory/listVo}" class="form-inline">
      <div class="modal-header" style="height:10%">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">物料选择</h4>
      </div>
      <div class="modal-body">
      <div style="height: 30px">
		<ul>
			<li class="col-sm-3" style="width: 33%">
				<label>物料号：</label>
				<input name="materialCode" type="text" id="materialCode" placeholder="物料号" class="form-control">
			</li>
			<li class="col-sm-3" style="width: 33%">
				<label>物料描述：</label>
				<input name="materialDesc" type="text" id="materialDesc" class="form-control" placeholder="物料描述">
			</li>
			<li class="col-sm-3" style="width: 33%">
				<button id="materialFactorySearchBtn" type="button" class="btn btn-primary btn-rounded btn-sm"><i class="fa fa-search"></i>&nbsp;搜索</button>
				<button class="btn btn-warning btn-rounded btn-sm" type="reset"><i class="fa fa-eraser"></i>&nbsp;重置</button>
			</li>
		</ul>
      </div>

		<table id="materialFactory" class="table table-bordered"></table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick='check_form("materialFactory")'>确定</button>
      </div>
      </form>
    </div>
  </div>
</div>-->
<!-- Modal Vendor -->
<div class="modal fade" id="myModalVendor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document" style="width:70%">
    <div class="modal-content" style="height:700px">
    
    <form id="vendorForm" th:action="@{/vendor/findSimplePage}" class="form-inline">
      <div class="modal-header" style="height:10%">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">供应商选择</h4>
      </div>
      <div class="modal-body">
		<div style="height: 30px">
	        <ul>
	           <li class="col-sm-3" style="width: 33%">
	            <label>供应商编码：</label>
	            <input name=srmCode type="text" id="srmCode" class="form-control" placeholder="供应商编码">
	           </li>
	           <li class="col-sm-3" style="width: 33%">
	            <label>供应商名称：</label>
	            <input name="vendorName" type="text" id="vendorName" class="form-control" placeholder="供应商名称">
	           </li>
	           <li class="col-sm-3" style="width: 33%">
	            <button id="vendorSearchBtn" type="button" class="btn btn-primary btn-rounded btn-sm"><i class="fa fa-search"></i>&nbsp;搜索</button>
	            <button class="btn btn-warning btn-rounded btn-sm" type="reset"><i class="fa fa-eraser"></i>&nbsp;重置</button>
	           </li>
	        </ul>
		</div>
		<table id="vendor" class="table table-bordered"></table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick='check_form("vendor")'>确定</button>
      </div>
      </form>
      
    </div>
  </div>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<!-- Chosen -->
<script th:src="@{/static/js/plugins/chosen/chosen.jquery.js}"></script>

<script type="text/javascript">
		
     $(function () {
		 //初始化选项卡
		 initTabBar("myTab");

		 // 初始化时间插件
		laydate.render({elem: '#beginDate'});
		laydate.render({elem: '#endDate'});
		//laydate.render({elem: '#deliveryDate'});
		//初始化所有字典数据
		initDictDataSel();
     });
		
        var materialCode="";
		var materialDesc="";
		var werks="";
		var materialGroup="";
		var id;
		
		function check_form(obj){
			//使用getSelections即可获得，row是json格式的数据
		    var rows = $("#"+obj).bootstrapTable('getSelections');
			//判断是否选中行
			if (!rows || rows.length == 0) {
			   Dialog.alert("请先选中一行！")
			   return;
			}
			showTableData(rows[0],obj);
		}
		
		function showTableData(json,obj) {
				if("vendor"==obj){
					//$("#vendor_table").bootstrapTable('removeAll');
		            $("#vendor_table td input[id='srmCode"+id+"']").val(json.srmCode);
			        $("#vendor_table td input[id='"+"vendorName"+id+"']").val(json.vendorName);
			        $("#vendor_table td select[id='payCondition"+id+"']").val(json.payCondition);
			        $("#vendor_table td select[id='i18nTradeTerms"+id+"']").val(json.i18nTradeTerms);
			        $('#myModalVendor').modal('hide');
				}
				if("materialFactory"==obj){
					//$("#para_table").bootstrapTable('removeAll');
		            $("#para_table td input[id='materialCode"+id+"']").val(json.materialFactoryEntity.materialCode);
			        $("#para_table td input[id='materialDesc"+id+"']").val(json.materialEntity.materialDesc);
			        $("#para_table td select[id='werks"+id+"']").val(json.materialFactoryEntity.werks);
			        $("#para_table td input[id='materialGroup"+id+"']").val(json.materialFactoryEntity.werks);
			        $('#myModal').modal('hide');
				}
	        }
			Searcher.createBS('#materialFactory',
			        [
			            {radio: true},
			            {title: "物料号", field:"materialFactoryEntity.materialCode"},
			            {title: "物料描述", field:"materialEntity.materialDesc"},
			            {title: "工厂",field:"materialFactoryEntity.werks"},
			            {title: "物料组",field:"materialEntity.materialGroup"}
			        ],{pageList: [10], pageSize : 10, showColumns: false, showRefresh: false}
			);
			Searcher.createBS('#vendor',
			        [
			            {radio: true},
			            {title: "供应商编码", field:"srmCode"},
			            {title: "供应商名称", field:"vendorName"},
			            {title: "付款条件",field:"payCondition"}
			        ],{pageList: [10], pageSize : 10, showColumns: false, showRefresh: false}
			);

	//新增行
	var index =0;
	var index1=0;
	function addtr(obj) {
		if("vendorformation"==obj){
			var mydate = new Date();
			var uuid = "rdn"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds();//根据时间来自动生成uuid，保证生成的id是唯一的
			var trCode = "<tr>";
		    trCode += "<td><input id='srmCode"+index1+ "' name='vendorCode' readonly='readonly' data-ids='"+index1+"' data-toggle='modal' data-target='#myModalVendor' /></td>";
		    trCode += "<td><input id='vendorName"+index1+ "' style='width:95%' name='vendorName' readonly='readonly' /></td>";
		    trCode += "<td><select id='payCondition"+index1+ "' style='width:95%' name='payCondition' class='form-control required' title='请输入付款条款' disabled='true' dictType='FKTJ' emptyFirst='true'></select></td>";
		    trCode += "<td><select id='i18nTradeTerms"+index1+ "' style='width:95%' name='i18nTradeTerms' class='form-control required' title='请输入国际贸易条款' disabled='true' dictType='GJMYTK' emptyFirst='true'/></td>";
		    trCode += "<td  align='center' onclick='deletetr(this)'><button type='button' class='btn btn-xs btn-link'>"+"删除"+"</button></td>";
		    trCode += "</tr>";
		    $("#vendor_table tbody").append(trCode);
		    index1=index1+1;
		    $('#myModalVendor').on('show.bs.modal', function (event) {
		    	var b = $(event.relatedTarget) // relatedTarget 事件属性返回与事件的目标节点相关的节点。
		    	var ids = b.context.dataset.ids;
		              id=ids;
		    })
		   }
		 if("materialformation"== obj){
	    	var trCode = "<tr>";
		    trCode += "<td><input id='materialCode"+index+ "' name='materialCode' readonly='readonly' data-ids='"+index+"' data-toggle='modal' data-target='#myModal' /></td>";
		    trCode += "<td><input id='materialDesc"+index+ "' name='materialDesc' readonly='readonly' title='物料描述' style='width:95%' /></td>";
		    trCode += "<td><input style='width:95%' name='purchaseCnt' class='required' title='请输入数量' /></td>";
		    trCode += "<td><input style='width:95%' name='poUnit' class='required' title='请输入计量单位' /></td>";
		    trCode += "<td><input style='width:95%' id='deliveryDate"+index+"' name='deliveryDate' class='form-control' title='请输入交货日期' /></td>";
		    trCode += "<td><select style='width:95%' id='werks"+index+"' name='werks' class='form-control required' title='请输入工厂' disabled='true' dictType='GC' emptyFirst='true'></select></td>";
		    trCode += "<td><input style='width:95%' type='text' name='storageLocation' class='required' title='请输入库存地点' /></td>";
		    trCode += "<td><input style='width:95%' id='materialGroup"+index+"' readonly='readonly' name='materialGroup' /></td>";
		    trCode += "<td><input style='width:95%' type='text' name='purchRequestCode' /></td>";
		    trCode += "<td><input style='width:95%' type='text' name='purchRequestItemCode' /></td>";
		    trCode += "<td><input style='width:95%' type='text' name='remark' /></td>";
		    trCode += "<td  align='center' onclick='deletetr(this)'><button type='button' class='btn btn-xs btn-link'>"+"删除"+"</button></td>";
		    trCode += "</tr>";
		    $("#para_table tbody").append(trCode);
		    laydate.render({elem: '#deliveryDate'+index});
		    index=index+1;
		    $('#myModal').on('show.bs.modal', function (event) {
		    	//这里需要注意的一个地方就是event.relatedTarget，这个方法的作用就是返回与事件的目标节点相关的节点。，而在这里与其相关的节点就是触发事件的button按钮。
                //在上面的图片上我们可以看到button中有很多属性，仔细找会发现，在context中有一条dataset即数据集，里面就存放着我们想要的ids，
                //刚开始我尝试了a.dataset.ids、a.dataset(‘ids’)、a.dataset.getattribute(‘ids’)。等等方法都找不到，
                //明明在dataset中已经有这个属性了，为什么还是找不到呢，后来发现因为dataset的外层还包了一个context，
                //最终通过a.context.dataset.ids;的方法得到了该属性，通过这里我猜测这个得到的button的结构类型是json类型。
                // 在这里需要一提的是，所引用的jquery版本不同，会导致Cannot read property ‘dataset’ of undefined的错误，本次我所使用的的jquery版本是1.10.2，而换成3.2.1的时候就会出错。
		    	var a = $(event.relatedTarget) // relatedTarget 事件属性返回与事件的目标节点相关的节点。
		    	var ids = a.context.dataset.ids;
                id=ids;
		    });
	    }
		fillDictDataSel();//自动往select框里面填充字典数据
	}
	
    function deletetr(tdobject) {
	    $(tdobject).parents("tr").remove();
    }
    
   function save() {
    	//回填下拉数据
    	//required:true
        if($("#inquiryHeaderForm").valid()) {
        	var data = {"inquiryHeaderEntity" : {}, "inquiryItemEntitylist" : [], "vendorInfolist" : [], "filenames":filenames};//先定义数据结构，head是一个对象，item是一个数组
    		//得到head div 下的 input select
        	var dataTitle = $("#basicinformation").find("input, select");
    		dataTitle.each(function(index, item) {//循环遍历，把head的内容塞进head对象
    		    //这里进行数据校验
    		    if($(item).val() != "undefined" && $(item).val() != null && $(item).val() != ""){
    		    		 data.inquiryHeaderEntity[$(item).attr("name")] = $(item).val();
    		    }
    		});
    		 if(JSON.stringify(data.inquiryHeaderEntity) == "{}"){
		    	delete data.inquiryHeaderEntity;
		    }
    		//得到物料行项目数据
    		var trs = $("#para_table").find("tr");
    		trs.each(function(index, tr) {//循环遍历，把item的内容塞进一个item对象，然后加到数组里
    			var itemEntity = {};
    			var its = $(tr).find("input, select");
    			its.each(function(idx, it) {//循环遍历，把item的内容塞进一个item对象，然后加到数组里
    				itemEntity[$(it).attr("name")] = $(it).val();
    			});
    			if(JSON.stringify(itemEntity) != "{}"){
    				data.inquiryItemEntitylist.push(itemEntity);
    			}
        	});
    		//得到供应商行项目数据
    		var trs = $("#vendor_table").find("tr");
    		trs.each(function(index, tr) {//循环遍历，把item的内容塞进一个item对象，然后加到数组里
    			var itemEntity = {};
    			var its = $(tr).find("input, select");
    			its.each(function(idx, it) {//循环遍历，把item的内容塞进一个item对象，然后加到数组里
    				itemEntity[$(it).attr("name")] = $(it).val();
    			});
    			if(JSON.stringify(itemEntity) != "{}"){
    				data.vendorInfolist.push(itemEntity);
    			}
        	});
    		if(data.vendorInfolist.length == 0){
				delete data.vendorInfolist;
			    var r=confirm("警告 : 请添加供应商信息");
			    if (r==true){
			     document.write("确认");
			    }
			}else{
				if(data.inquiryItemEntitylist.length == 0){
					delete data.inquiryItemEntitylist;
				    var r=confirm("警告 : 请添物料信息");
				    if(r==true){
					    document.write("确认");
					}
				}else{
					 //点击保存后上传
	    	    	 $("#input-id").fileinput("upload");	
	    	    	 $.ajax({
	    					type: "POST",
	    					url: ctxPath + "/inquiryHeader/update",
	    					data: JSON.stringify(data),//必须
	    					contentType : "application/json;charsetset=UTF-8",//必须
	    					dataType:"json",//必须
	    					cache: true,
	    					async: false,
	    					error: function (request) {
	    					      showTipAlert("Connection error");
	    					},
	    					 success: function (data) {
	    						Dialog.msg("保存成功!",function(){
	    		                    Dialog.closeFrame(window.name)
	    		                });
	    					}
	    			 });
				}
			}
        }
    }
</script>

</body>
</html>
